import { CockpitChartBaseProps } from "../helps";
import React from "react";

export interface ProjectDistributionPieChart2Props
  extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getProjectDistributionPieChart2Option = ({
  dataSource = [],
  img,
}: ProjectDistributionPieChart2Props): EChartsOption => {
  const color = ["#FEE409", "#2BE872", "#2CFFFF", "#7E00F3", "#FD850B"];
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});

  const dataSourceMemo = dataSource.reduce<any[]>((memo, cur, currentIndex) => {
    memo.push(
      {
        value: cur.amount,
        name: cur.name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[currentIndex],
            shadowColor: color[currentIndex],
          },
        },
      },
      {
        value: 4,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );

    return memo;
  }, []);
  return {
    grid: {
      left: 0,
    },

    color: color,

    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 103,
            height: 103,
          },
          left: "15.6%",
          top: "26%",
          //   position: [100, 100],
        },
      ],
    },
    tooltip: {
      show: false,
    },
    legend: {
      right: "0%",
      top: "middle",
      left: "53%",
      //   bottom: "80%",

      data: dataSource.map((d) => d.name || ""),
      icon: "circle",
      formatter: (name) => {
        const value = nameMap[name];

        if (total === 0) {
          return `{a|${name} }{b|0%}{c|${value}}`;
        }

        return `{a|${name} }{b|${((value * 100) / total).toFixed(
          2
        )}%}{c|${value}个}`;
      },

      textStyle: {
        rich: {
          a: {
            color: "#ffffff",
            width: 50,
            fontSize: 14,
            align: "left",
            fontFamily: "Arial",
          },
          b: {
            color: "#ffffff",
            fontSize: 14,
            width: 62,
            fontFamily: "Arial",
          },
          c: {
            color: "#ffffff",
            fontSize: 14,
            fontFamily: "Arial",
          },
        },
      },

      itemHeight: 8,
      itemWidth: 8,
      itemGap: 25,
      itemStyle: {
        color: "",
        borderColor: "inherit",
        borderWidth: 2,
        borderType: "solid",
      },
    },
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        clockwise: false,
        radius: [65, 69],
        // width:80,
        // radius: ['70%', '75%'],
        center: ["27%", "50%"],
        label: {
          show: false,
        },
        itemStyle: {},
        data: dataSourceMemo,
      },
    ],
  };
};

const ProjectDistributionPieChart2 = ({
  reactEChartsProps,
  dataSource,
  img,
}: ProjectDistributionPieChart2Props) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "213px",
      }}
      option={getProjectDistributionPieChart2Option({
        dataSource,
        img,
      })}
    />
  );
};

export default ProjectDistributionPieChart2;
